<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>

</head>
<body>
    <div id="app">
        <h1>知识点1 v-if</h1>
        <h3>v-if v-if-else v-else 他们中间是不能有任何其他标签对</v-if></h3>
        <p>例子</p>
        <h3 v-if="order==0">我是第一排的</h3>
        <h3 v-else-if="order==1">我是不上不下的第二排</h3>
        <h3 v-else>我是垫后的第三排</h3>
        <br>
        <button @click="order=++order%3">切换</button>
        <h1>知识点2 v-show</h1>
            <p>例子</p>
            <h3 v-show="visible">我是v-show</h3>
            <h3 v-if="visible">我是v-if</h3>
            <button @click="visible=!visible">显示/隐藏</button>
            <h4>
                v-show 是通过添加样式来实现隐藏的，v-if是通过删除标签来隐藏的，
                通常情况下，知识单纯隐藏显示，选用v-show

            </h4>
        <h1>课堂练习</h1>
            <h3>通过按钮的单击事件实现不同用户的身份显示不同的前段页面</h3>
            <input type="radio" value="管理员" v-model="users">管理员1
            <input type="radio" value="老师" v-model="users">老师
            <input type="radio" value="学生" v-model="users">学生
            <br>
            <div v-if="users=='管理员'">
                {{users}}欢迎你
                <button>管理</button>
            </div>
            <div v-if="users=='老师'">
                {{users}}欢迎你
                <button>上课</button>
            </div>
            <div v-if="users=='学生'">
                {{users}}欢迎你
                <button>学习</button>
            </div>
        <h1>自主练习 :选择登录凡是和。微信 qq 手机</h1>

    </div>
</body>
</html>
<script>
const app = Vue.createApp({
    data() {
        return {
            order:0,
            visible:true,
            users:''
        }
    },

}).mount("#app")


</script>